<template>
    <div class="container">
        <Breadcrumb :items="['menu.biz', 'menu.biz.order']" />
        <a-card class="general-card" title="商家消费订单">
            <a-row>
                <a-col :flex="1">
                    <a-form :model="searchForm">
                        <a-row :gutter="16">
                            <a-col :span="3">
                                <a-form-item field="goods_title" label="商品名称" hide-label>
                                    <a-input v-model="searchForm.goods_title" placeholder="请输入商品名称" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :span="3">
                                <a-form-item field="phone" label="手机号" hide-label>
                                    <a-input v-model="searchForm.phone" placeholder="请输入手机号" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-space>
                                    <a-button type="primary" @click="search">
                                        <template #icon>
                                            <icon-search />
                                        </template>
                                        搜索
                                    </a-button>
                                    <a-button @click="reset">
                                        <template #icon>
                                            <icon-refresh />
                                        </template>
                                        重置
                                    </a-button>
                                </a-space>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-col>
            </a-row>
            <a-table :data="renderData" :loading="loading" :bordered="{ cell: true }" :pagination="pagination"
					@page-change="onPageChange">
                <template #columns>
                    <a-table-column title="ID" data-index="id" :width="80" />
                    <a-table-column title="商家名字" data-index="biz_name" :width="200" :ellipsis="true" :tooltip="true" />
                    <a-table-column title="商品名字" data-index="goods_title"/>
                    <a-table-column title="购买数量" data-index="quantity" :width="100" />
                    <a-table-column title="订单金额" data-index="money" :width="120" />
                    <a-table-column title="订单状态" data-index="status_text" :width="120" />
                    <a-table-column title="生成时间" data-index="created_at" :width="180" />
                    <a-table-column title="下单手机号" data-index="user_phone" :width="180" />
                    <a-table-column title="是否核销" data-index="confirm_at" :width="180">
                        <template #cell="{ record }">
                            <a-link v-if="record.confirm_at" color="green">{{ record.confirm_at }}</a-link>
                            <a-tag v-else color="red">未核销</a-tag>
                        </template>
                    </a-table-column>
                    <a-table-column title="操作" data-index="action" :width="150" fixed="right">
							<template #cell="{ record }">
								<a-space>
									<a-link @click="showTickets(record)">核销码</a-link>
									<a-link @click="showDetail(record)">查看</a-link>
								</a-space>
							</template>
						</a-table-column>
                </template>
            </a-table>
        </a-card>

        <!-- 订单详情抽屉 -->
        <a-drawer v-model:visible="detailVisible" width="600px" :footer="false" title="订单详情">
            <div v-if="currentOrder" class="order-detail">
                <a-descriptions :data="detailData" layout="vertical" bordered :column="1" />

                <a-divider />

                <div class="goods-info">
                    <h4>商品信息</h4>
                    <div class="goods-item">
                        <a-image v-if="currentOrder.goods_image" :src="currentOrder.goods_image" width="80" height="80"
                            fit="cover" />
                        <div class="goods-content">
                            <div class="goods-title">{{ currentOrder.goods_title }}</div>
                        </div>
                    </div>
                </div>

                <a-divider />

                <div class="user-info">
                    <h4>用户信息</h4>
                    <a-descriptions :data="userData" layout="vertical" bordered :column="1" />
                </div>
            </div>
        </a-drawer>

        <!-- 核销码抽屉 -->
        <a-modal v-model:visible="ticketVisible" width="750px" :footer="false" title="核销码">
            <div v-if="currentTicket">
                <a-table :data="ticketList" :bordered="{ cell: true }" :pagination="false">
                    <template #columns>
                        <a-table-column title="ID" data-index="id" />
                        <a-table-column title="核销码" data-index="code" />
                        <a-table-column title="核销时间" data-index="used_at">
                            <template #cell="{ record }">
                                <a-link v-if="record.used_at" color="green">{{ record.used_at }}</a-link>
                                <a-tag v-else color="red">未核销</a-tag>
                            </template>
                        </a-table-column>
                        <a-table-column title="创建时间" data-index="created_at" />
                    </template>
                </a-table>
            </div>
        </a-modal>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { Message } from '@arco-design/web-vue';
import { queryBizGoodsOrderList, queryBizGoodsOrderDetail,queryBizGoodsOrderTickets } from '@/api/bizGoodsOrder';
import type { BizGoodsOrderRecord, BizGoodsOrderParams } from '@/api/bizGoodsOrder';

const loading = ref(false);
const renderData = ref<BizGoodsOrderRecord[]>([]);
const detailVisible = ref(false);
const currentOrder = ref<BizGoodsOrderRecord | null>(null);

const searchForm = reactive<BizGoodsOrderParams>({
    current: 1,
    pageSize: 10,
    goods_title: '',
    phone: '',
});

const pagination = reactive({
    total: 0,
    current: 1,
    pageSize: 10,
    showTotal: true,
    showJumper: true,
    showPageSize: true,
});


const detailData = computed(() => {
    if (!currentOrder.value) return [];

    return [
        {
            label: '订单ID',
            value: currentOrder.value.id,
        },
        {
            label: '订单金额',
            value: `¥${currentOrder.value.money}`,
        },
        {
            label: '订单状态',
            value: currentOrder.value.status_text,
        },
        {
            label: '交易流水号',
            value: currentOrder.value.transaction_id || '暂无',
        },
        {
            label: '创建时间',
            value: currentOrder.value.created_at,
        },
        {
            label: '支付时间',
            value: currentOrder.value.paid_at || '未支付',
        },
        {
            label: '更新时间',
            value: currentOrder.value.updated_at,
        },
    ] as any[];
});

const userData = computed(() => {
    if (!currentOrder.value) return [];

    return [
        {
            label: '用户昵称',
            value: currentOrder.value.user_nickname,
        },
        {
            label: '手机号',
            value: currentOrder.value.user_phone,
        },
    ] as any[];
});

const getStatusColor = (status: string) => {
    const colorMap: Record<string, string> = {
        unpay: 'orange',
        paid: 'green',
        cancelled: 'red',
        refunded: 'blue',
    };
    return colorMap[status] || 'default';
};

const fetchData = async () => {
    loading.value = true;
    try {
        const { data } = await queryBizGoodsOrderList(searchForm);
        renderData.value = data.list;
        pagination.total = data.total;
    } catch (err) {
        Message.error('获取订单列表失败');
    } finally {
        loading.value = false;
    }
};

const search = () => {
    searchForm.current = 1;
    pagination.current = 1;
    fetchData();
};

const reset = () => {
    searchForm.goods_title = '';
    searchForm.phone = '';
    search();
};

const onPageChange = (current: number) => {
    searchForm.current = current;
    pagination.current = current;
    fetchData();
};

const showDetail = async (record: BizGoodsOrderRecord) => {
    try {
        const { data } = await queryBizGoodsOrderDetail({ id: record.id });
        currentOrder.value = data;
        detailVisible.value = true;
    } catch (err) {
        Message.error('获取订单详情失败');
    }
};

// 核销码
const ticketList = ref([]);
const fetchTickets = async (record: BizGoodsOrderRecord) => {
    const { data } = await queryBizGoodsOrderTickets({ id: record.id });
    ticketList.value = data;
};
const ticketVisible = ref(false);
const currentTicket = ref<BizGoodsOrderRecord | null>(null);
const showTickets = (record: BizGoodsOrderRecord) => {
    fetchTickets(record);
    currentTicket.value = record;
    ticketVisible.value = true;
};

onMounted(() => {
    fetchData();
});
</script>

<style scoped lang="less">
.container {
    padding: 0 20px 20px 20px;
}

.general-card {
    min-height: 500px;
}

.order-detail {

    .goods-info,
    .user-info {
        h4 {
            margin-bottom: 16px;
            font-weight: 600;
        }
    }

    .goods-item {
        display: flex;
        align-items: center;
        gap: 16px;

        .goods-content {
            flex: 1;

            .goods-title {
                font-weight: 500;
                margin-bottom: 8px;
            }
        }
    }
}

.text-red-500 {
    color: #f53f3f;
}

.font-bold {
    font-weight: bold;
}
</style>
